<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="80">
          <FormItem label="选择器类型">
            <Select :transfer="true" size="small" v-model="type">
              <Option v-for="item in types" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="选择模式">
            <Select :transfer="true" size="small" v-model="selectModel">
              <Option v-for="item in selectModels" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </Form>

        <Form :label-width="100">

          <FormItemPanel title="样式配置">
            <FormItem label="背景色">
              <PnColorPicker size="small" v-model="inputStyle.backgroundColor" alpha recommend/>
            </FormItem>
            <FormItem label="文本色">
              <PnColorPicker size="small" v-model="inputStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="边框宽度">
              <InputNumber size="small" :max="1000" :min="1" v-model="inputStyle.borderWidth"></InputNumber> px
            </FormItem>
            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="inputStyle.borderColor" alpha recommend/>
            </FormItem>
          </FormItemPanel>
        </Form>

      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="选中值变化时触发">
            <InteractionSender :interactionKey="'itemChange'" :canAddFieldsMap="false"></InteractionSender>
            <Alert show-icon>通过value可获取选中值</Alert>
            <CodeEditor v-model="onChangeCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'CitySelectCompForm', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompFormMixin],
    data() {
      return {
        types: [
          {label: '多分组切换模式', value: 'group'},
          {label: '多列竖排模式', value: 'column'},
          {label: '城市多选', value: 'city'},
        ],
        selectModels: [
          {label: '省/直辖市、市、区/县、乡/镇/街道', value: 'ssqj'},
          {label: '省/直辖市、市、区/县', value: 'ssq'},
          {label: '省/直辖市、市', value: 'ss'},
          {label: '省/直辖市', value: 's'}
        ]
      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      ...mapFields({

        type: 'component.compConfigData.type',
        selectModel: 'component.compConfigData.selectModel',

        inputStyle: 'component.compConfigData.inputStyle',

        onChangeCode: 'component.compConfigData.onChangeCode',

      })
    }
  }
</script>

<style scoped>

</style>
